<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<link rel=stylesheet href="{{=URL('static','css/nicksmapviewer.css')}}" />
		{{include 'web2py_ajax.html'}}
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyDohPTPxb7MfdQ1er4R6P9KeFAaKXJuhRE"></script>

		<script type="text/javascript">
			function initialize(){
				var mapCenter = new google.maps.LatLng('38.78812535415137','-98.69549373473689');
				var mapOptions = {
					zoom: 5,
					center: mapCenter,
					mapTypeId: google.maps.MapTypeId.ROADMAP,
				};
				var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

				setMarkers(map, stores)
				$("#loading").hide();

				infowindow = new google.maps.InfoWindow({
					content: "loading..."
				});
			}

			var stores = [
			{{for row in data:}}
				['{{=row[0]}}','{{=row[2]}}','{{=row[3]}}'],
			{{pass}}
			];

			function setMarkers(map, locations) {
				for (var i = 0; i < locations.length; i++) {
					var store = locations[i];
					var myLatLng = new google.maps.LatLng(store[1],store[2]);

					var infoContent = store[0]

					var marker = new google.maps.Marker({
						position: myLatLng,
						map: map,
						title: store[0],
						animation: google.maps.Animation.DROP,
						html: infoContent
						});

					google.maps.event.addListener(marker, "click", function(){
						infowindow.setContent(this.html);
						infowindow.open(map, this);
					});
				}
			}

			function showHideDiv(showid,hideid) {
				$('#'+showid).show();
				$('#'+hideid).hide();
			}
		</script>

	</head>

	<body onload="initialize()">
		<div id="controls">
			<p>
				Your Address: <input name="userAddressInput" type="text"></input>
				<input type="submit" value="Find Nearest Stores" onclick="showHideDiv('loading','map_canvas');ajax('{{=URL('getNearestStores')}}',['userAddressInput'],'map_canvas')"/>
			</p>
		</div>

		<div id="loading"><img src="{{=URL('static','images/ajax-loader.gif')}}" /></div>
		<div id="map_canvas"></div>
	</body>
</html>